import React from 'react';
import { Timeline as AntdTimeline } from 'antd';
import type { TimelineProps as AntdTimelineProps } from 'antd';
import { createStyles } from 'antd-style';

export interface TimelineProps extends AntdTimelineProps {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
}

const useStyles = createStyles(({ token, css }) => ({
  timeline: css`
    .ant-timeline-item-tail {
      border-color: ${token.colorBorder};
    }
  `,
}));

const TimelineComponent: React.FC<TimelineProps> = ({ customClassName, className, ...restProps }) => {
  const { styles, cx } = useStyles();
  
  const timelineClassName = cx(
    className,
    customClassName,
    styles.timeline
  );

  return <AntdTimeline className={timelineClassName} {...restProps} />;
};

// 创建复合组件
type TimelineType = typeof TimelineComponent & {
  Item: typeof AntdTimeline.Item;
};

const Timeline = TimelineComponent as TimelineType;

// 导出子组件
Timeline.Item = AntdTimeline.Item;

export { Timeline };
export default Timeline;

